<template>
	<custom-navigation-bar></custom-navigation-bar>
	<scroll-view style="flex: 1;" scroll-y>
		<view class="vip-detail-container">
			<!-- 背景装饰 -->
			<view class="bg-decoration bg-1"></view>
			<view class="bg-decoration bg-2"></view>

			<!-- 服务图片展示 -->
			<view class="service-gallery">
				<swiper indicator-dots circular autoplay interval="5000">
					<swiper-item v-for="(img, index) in serviceImages" :key="index">
						<image :src="img.url" mode="widthFix" :alt="img.alt" class="gallery-img"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 服务头部信息 -->
			<view class="service-header">
				<view class="service-badge justify-center align-center">推荐服务</view>
				<view class="service-title">国内贵宾通道服务</view>
				<view class="service-price flex-row align-end">
					<text class="price">¥380</text>
					<text class="unit">/次/人</text>
				</view>
				<view class="service-tags flex-row">
					<view class="tag">快速安检</view>
					<view class="tag">贵宾休息</view>
					<view class="tag">专属服务</view>
				</view>
			</view>



			<!-- 服务详情内容 -->
			<view class="service-details">
				<!-- 服务介绍 -->
				<view class="detail-section">
					<view class="section-title flex-row">
						<view class="title-icon"></view>
						<text>服务介绍</text>
					</view>
					<view class="section-content">
						<text class="content-text">
							国内贵宾通道服务为您提供全方位的机场贵宾体验，从抵达机场到登机的全程专属服务，
							让您的出行更加舒适、高效、尊贵。专业礼宾人员将全程为您提供协助，
							避免排队等待，享受私密舒适的休息空间。
						</text>
					</view>
				</view>

				<!-- 服务包含 -->
				<view class="detail-section">
					<view class="section-title flex-row">
						<view class="title-icon"></view>
						<text>服务包含</text>
					</view>
					<view class="section-content">
						<view class="service-includes">
							<view class="include-item" v-for="(item, index) in serviceIncludes" :key="index">
								<view class="include-icon">
									<!-- <image src="/static/icons/check-circle.png" mode="widthFix" alt="包含服务图标"></image> -->
								</view>
								<text class="include-text">{{ item }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 服务流程 -->
				<view class="detail-section">
					<view class="section-title flex-row">
						<view class="title-icon"></view>
						<text>服务流程</text>
					</view>
					<view class="section-content">
						<view class="service-process">
							<view class="process-item" v-for="(step, index) in serviceProcess" :key="index">
								<view class="process-number">{{ index + 1 }}</view>
								<view class="process-content">
									<text class="process-title">{{ step.title }}</text>
									<text class="process-desc">{{ step.desc }}</text>
								</view>
								<!-- 连接线 -->
								<view class="process-line" v-if="index < serviceProcess.length - 1"></view>
							</view>
						</view>
					</view>
				</view>

				<!-- 额外服务 -->
				<view class="detail-section">
					<view class="section-title flex-row">
						<view class="title-icon"></view>
						<text>额外服务</text>
					</view>
					<view class="section-content">
						<view class="extra-services">
							<view class="extra-item flex-row justify-between" v-for="(item, index) in extraServices"
								:key="index">
								<view class="extra-info">
									<text class="extra-name">{{ item.name }}</text>
									<text class="extra-desc">{{ item.desc }}</text>
								</view>
								<text class="extra-price">{{ item.price }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 使用须知 -->
				<view class="detail-section">
					<view class="section-title flex-row">
						<view class="title-icon"></view>
						<text>使用须知</text>
					</view>
					<view class="section-content">
						<view class="notes-list">
							<view class="note-item" v-for="(note, index) in usageNotes" :key="index">
								<view class="note-icon">
									<!-- <image src="/static/icons/info.png" mode="widthFix" alt="注意事项图标"></image> -->
								</view>
								<text class="note-text">{{ note }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 预约按钮 -->

		</view>
	</scroll-view>
	<view class="booking-bar">
		<button class="book-btn" @click="gotoBooking">
			<text>立即预约</text>
			<view class="btn-arrow"></view>
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 服务图片
				serviceImages: [{
						url: '/static/images/1.jpg',
						alt: '贵宾休息室环境'
					},
					{
						url: '/static/images/1.jpg',
						alt: '专属值机柜台'
					},
					{
						url: '/static/images/1.jpg',
						alt: '快速安检通道'
					}
				],

				// 服务包含内容
				serviceIncludes: [
					'贵宾楼限时免费停车（2小时）',
					'专业礼宾员全程引导服务',
					'前台专属值机及核销服务',
					'贵宾休息厅使用（含定时自助餐）',
					'专属安检通道快速通行',
					'优先登机服务',
					'航班信息实时提醒'
				],

				// 服务流程
				serviceProcess: [{
						title: '抵达贵宾楼',
						desc: '驾车或步行至贵宾楼入口，出示预约信息'
					},
					{
						title: '办理手续',
						desc: '在专属前台办理值机、行李托运等手续'
					},
					{
						title: '休息等待',
						desc: '在贵宾休息厅放松休息，享用餐饮服务'
					},
					{
						title: '快速安检',
						desc: '通过专属安检通道，无需排队等待'
					},
					{
						title: '优先登机',
						desc: '在指定时间由礼宾员引导至登机口优先登机'
					}
				],

				// 额外服务
				extraServices: [{
						name: '私密包房（小）',
						desc: '容纳2-4人，独立空间，提供茶点',
						price: '500元/小时'
					},
					{
						name: '私密包房（中）',
						desc: '容纳5-8人，独立空间，提供茶点和会议设施',
						price: '1000元/小时'
					},
					{
						name: '私密包房（大）',
						desc: '容纳9-15人，豪华独立空间，专属服务',
						price: '2000元/小时'
					},
					{
						name: '额外停车时长',
						desc: '超出免费时长后的停车费用',
						price: '50元/小时'
					}
				],

				// 使用须知
				usageNotes: [
					'请至少提前2小时预约本服务',
					'请携带有效身份证件和机票信息办理手续',
					'服务时间为每日06:00-22:00',
					'免费停车时长为2小时，超出部分需额外付费',
					'如行程变更，请提前1小时取消预约，否则将收取50%费用',
					'12岁以下儿童享受半价优惠，2岁以下婴儿免费'
				]
			}
		},
		methods: {
			// 前往预约页面
			gotoBooking() {
				// 检查用户是否登录
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						confirmText: '去登录',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/subPackages/login/index/index',
									routeType:'wx://zoom'
								});
							}
						}
					});
					return;
				}

				// 跳转到预约页面
				const serviceInfo = {
					type: 'vip-channel',
					name: '国内贵宾通道服务',
					price: 380
				};

				wx.navigateTo({
					url: `/pages/order/order-success?serviceInfo=${encodeURIComponent(JSON.stringify(serviceInfo))}`,
					routeType: 'wx://upwards'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vip-detail-container {
		background-color: #f8f9fd;
		min-height: 100vh;
		position: relative;
		padding-bottom: 120rpx; // 为底部预约按钮预留空间

		// 背景装饰
		.bg-decoration {
			position: absolute;
			border-radius: 50%;
			filter: blur(80rpx);
			z-index: 0;
		}

		.bg-1 {
			width: 400rpx;
			height: 400rpx;
			top: -150rpx;
			right: -100rpx;
			background-color: rgba(99, 102, 241, 0.1);
		}

		.bg-2 {
			width: 300rpx;
			height: 300rpx;
			bottom: -100rpx;
			left: -50rpx;
			background-color: rgba(139, 92, 246, 0.1);
		}

		.center-slot {
			color: #1d2129;
			font-size: 36rpx;
			font-weight: 600;
		}

		// 服务头部信息
		.service-header {
			padding: 30rpx;
			background-color: #ffffff;
			border-radius: 24rpx;
			margin: 0 30rpx 30rpx;
			box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
			position: relative;
			z-index: 1;

			.service-badge {
				display: inline-block;
				background-color: #fdb218;
				color: #ffffff;
				font-size: 22rpx;
				padding: 5rpx 18rpx;
				border-radius: 20rpx;
				margin-bottom: 15rpx;
			}

			.service-title {
				font-size: 36rpx;
				font-weight: 700;
				color: #1d2129;
				margin-bottom: 10rpx;
			}

			.service-price {
				margin-bottom: 20rpx;

				.price {
					font-size: 38rpx;
					font-weight: 700;
					color: #f59e0b;
				}

				.unit {
					font-size: 26rpx;
					color: #86909c;
					margin-left: 5rpx;
				}
			}

			.service-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 15rpx;

				.tag {
					background-color: #f1f5f9;
					color: #475569;
					font-size: 24rpx;
					padding: 8rpx 20rpx;
					border-radius: 20rpx;
				}
			}
		}

		// 服务图片展示
		.service-gallery {
			padding: 0 30rpx 30rpx;
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 360rpx;
				border-radius: 24rpx;
				overflow: hidden;
			}

			.gallery-img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		// 服务详情内容
		.service-details {
			padding: 0 30rpx;
			position: relative;
			z-index: 1;

			.detail-section {
				background-color: #ffffff;
				border-radius: 24rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);

				.section-title {
					display: flex;
					align-items: center;
					margin-bottom: 25rpx;

					.title-icon {
						width: 8rpx;
						height: 28rpx;
						background-color: #fdb218;
						border-radius: 4rpx;
						margin-right: 15rpx;
					}

					text {
						font-size: 30rpx;
						font-weight: 600;
						color: #1d2129;
					}
				}

				.section-content {
					color: #4e5969;

					.content-text {
						font-size: 26rpx;
						line-height: 1.8;
					}

					// 服务包含
					.service-includes {
						.include-item {
							display: flex;
							align-items: flex-start;
							margin-bottom: 20rpx;

							&:last-child {
								margin-bottom: 0;
							}

							.include-icon {
								margin-right: 15rpx;
								margin-top: 5rpx;

								image {
									width: 28rpx;
									height: 28rpx;
								}
							}

							.include-text {
								font-size: 26rpx;
								line-height: 1.6;
								flex: 1;
							}
						}
					}

					// 服务流程
					.service-process {
						position: relative;
						padding-left: 60rpx;

						.process-item {
							position: relative;
							margin-bottom: 40rpx;

							&:last-child {
								margin-bottom: 0;
							}

							.process-number {
								position: absolute;
								left: -60rpx;
								top: 0;
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
								background-color: #fdb218;
								color: #ffffff;
								font-size: 24rpx;
								font-weight: 500;
								text-align: center;
								line-height: 40rpx;
							}

							.process-content {
								.process-title {
									font-size: 28rpx;
									font-weight: 500;
									color: #1d2129;
									display: block;
									margin-bottom: 8rpx;
								}

								.process-desc {
									font-size: 26rpx;
									line-height: 1.6;
									color: #4e5969;
								}
							}

							.process-line {
								position: absolute;
								left: -42rpx;
								top: 40rpx;
								width: 2rpx;
								height: 100%;
								background-color: #e2e8f0;
							}
						}
					}

					// 额外服务
					.extra-services {
						.extra-item {
							display: flex;
							justify-content: space-between;
							padding: 25rpx 0;
							border-bottom: 1rpx solid #f1f5f9;

							&:last-child {
								border-bottom: none;
							}

							.extra-info {
								.extra-name {
									font-size: 28rpx;
									color: #1d2129;
									font-weight: 500;
									display: block;
									margin-bottom: 5rpx;
								}

								.extra-desc {
									font-size: 24rpx;
									color: #86909c;
								}
							}

							.extra-price {
								font-size: 28rpx;
								color: #f59e0b;
								font-weight: 500;
								display: flex;
								align-items: center;
							}
						}
					}

					// 使用须知
					.notes-list {
						.note-item {
							display: flex;
							align-items: flex-start;
							margin-bottom: 20rpx;

							&:last-child {
								margin-bottom: 0;
							}

							.note-icon {
								margin-right: 15rpx;
								margin-top: 5rpx;

								image {
									width: 28rpx;
									height: 28rpx;
								}
							}

							.note-text {
								font-size: 26rpx;
								line-height: 1.6;
								flex: 1;
							}
						}
					}
				}
			}
		}


	}

	// 底部预约按钮
	.booking-bar {
		
		padding: 20rpx 30rpx;
		background-color: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10rpx);
		box-shadow: 0 -2rpx 15rpx rgba(0, 0, 0, 0.05);
		z-index: 10;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.book-btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background: linear-gradient(90deg, #fdb218, #fdb218);
			color: #fff;
			font-size: 30rpx;
			font-weight: 500;
			border-radius: 45rpx;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
				transition: all 0.6s ease;
			}

			&:active {
				transform: scale(0.98);
			}

			&:active::after {
				left: 100%;
			}
		}

		.btn-arrow {
			width: 12rpx;
			height: 12rpx;
			margin-left: 10rpx;
			border-top: 3rpx solid #ffffff;
			border-right: 3rpx solid #ffffff;
			transform: rotate(45deg);
			transition: transform 0.3s ease;
		}

		.book-btn:active .btn-arrow {
			transform: rotate(45deg) translateX(5rpx) translateY(-5rpx);
		}
	}
</style>